<template>
  <main class="part-item">
    <el-progress
      class="progress"
      type="circle"
      :percentage="percentage"
      width="50"
      :color="status"
    />
    <div class="part-name">{{ partName }}</div>
    <ColorLight :color="runingStatus"></ColorLight>
  </main>
</template>

<script lang="ts" setup>
import { watch, ref } from "vue";
import { Status } from "./types";
import ColorLight from "./ColorLight.vue";

const props = defineProps({
  percentage: {
    default: 40,
    type: Number
  },
  partName: {
    type: String,
    default: "未知部件"
  },
  runingStatus: {
    type: String,
    default: "yellow"
  }
});

const status = ref<string>();

const setValue = (newValue: number) => {
  if (newValue < 80) {
    status.value = Status.Sucess;
  }
  if (newValue >= 80 && newValue < 100) {
    status.value = Status.Warning;
  } else if (newValue === 100) {
    status.value = Status.Exception;
  }
};

setValue(props.percentage);

watch(
  () => props.percentage,
  (newValue) => {
    setValue(newValue);
  }
);
</script>

<style lang="scss" scoped>
.part-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  border: 1px solid rgb(177, 34, 243);
  border-radius: 4px;
  margin-bottom: 5px;
  .progress {
    :deep(.el-progress__text) {
      color: white;
    }
  }
  .part-name {
    width: 130px;
    color: lightgreen;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}
</style>
